.settings-section {
  background: #fbfbfb none repeat scroll 0 0;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  height: 320px;
  left: -200px;
  position: fixed;
  top: 200px;
  width: 200px;
  z-index: 9999;
  padding: 10px 20px;
  border-radius: 0 3px 3px 0;
  transition: all 0.3s ease-in;
}

.settings-section.active{
	left: 0px;
}
.settings-section h4 {
  font-weight: 400;
  padding-left: 10px;
  margin-top: 25px;
  position: relative;
  text-transform: uppercase;
}

.settings-section h4::after {
  background: #000 none repeat scroll 0 0;
  content: "";
  height: 1px;
  left: 10px;
  position: absolute;
  top: 24px;
  width: 130px;
  border-bottom: 1px dashed #fff;
}

.settings-section .settings-btn {
  background: #fff none repeat scroll 0 0;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 2px 0 4px rgba(0, 0, 0, 0.1) inset;
  color: #000;
  height: 45px;
  padding: 10px 12px;
  position: absolute;
  right: -45px;
  top: 23px;
  width: 45px;
  z-index: 9999;
}
.settings-section .settings-btn:hover{
	cursor: pointer;
}
.settings-section .settings-btn i{
	font-size: 25px
}

.color-list {
  margin-left: 6px;
  margin-top: 45px;
}
.color-list .color {
  background: red none repeat scroll 0 0;
  float: left;
  height: 50px;
  margin-bottom: 3px;
  margin-right: 4px;
  width: 45px;
}
.color-list .color:hover {
	cursor: pointer;
}

.color-list .color.sky-blue{
	background: #398de3
}
.color-list .color.light-green{
  background: #00a651
}

.color-list .color.orange{
	background: #fd5308
}

.color-list .color.vivid-pink{
	background: #ed145b
}
.color-list .color.blue{
	background: #0247fe
}
.color-list .color.vivid-orange{
  background: #f39c12
}

.color-list .color.pink{
  background: #ff1493
}
.color-list .color.purple{
  background: #8601af
}
.color-list .color.vivid-orange{
  background: #f39c12
}